/* eslint-disable import/no-named-as-default-member */
/* eslint-disable import/no-named-as-default */
import React from 'react';
import { observer } from 'mobx-react-lite';
import { mount, get } from '@choerodon/inject';
import { Loading } from '@choerodon/components';
import OptsDetailContent from './OptsDetailContent';
import PipelineDetail from './components/pipeline-detail';
import { usePipelineFlowStore } from './stores';

import { usePipelineManageStore } from '../../stores/index';

export default observer((props) => {
  const {
    handleRefresh,
    getSelectedMenu,
    appPipelineFlowModel,
    openAuditModal,
  } = usePipelineFlowStore();

  const { prefixCls, detailStore } = usePipelineManageStore();

  const {
    parentId,
    stageRecordVOS,
    hasRecords,
  } = getSelectedMenu;

  const {
    getDetailData: { stageRecordVOS: detailStageRecordVOS, unrelatedFlag, gitlabPipelineUrl },
  } = detailStore;

  const getContent = () => (appPipelineFlowModel === 'tree' ? renderPipelineTreeModel() : renderPipeline());

  const renderPipelineTreeModel = () => (
    hasRecords
      ? mount('configuration.devops-routes-pipeline-manage:treeModelFlowContent', {
        openAuditModal,
      }) : mount('configuration.devops-routes-pipeline-manage:empty-record', {
        prefixCls,
      })
  );

  const renderPipeline = () => (parentId ? (
    <OptsDetailContent
      handleRefresh={handleRefresh}
    />
  ) : <PipelineDetail />);

  return (
    <div className="c7ncd-pipelineManage_flow">
      {getContent()}
    </div>
  );
});
